<template>
  <div class="menu">
    <el-col :span="24">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        
        @open="handleOpen"
        @close="handleClose"
      >
      <template  v-for="(item, index) in menu">
        <router-link :to="'/home/'+item.path" :key="index"   v-if="!item.children">
          <el-menu-item :index="item.path" >
          <i :class="item.meta.icon"></i>
          <span slot="title">{{ item.meta.title}}</span>
        </el-menu-item>
        </router-link>
        
        <!-- 一级菜单 -->
        <el-submenu :index="item.path" v-else :key="index">
          <template slot="title">
            <i :class="item.meta.icon"></i>
            <span>{{ item.meta.title}}</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item-group>
               <router-link :to="'/home/'+item.path+'/'+item1.path"  v-for="item1 in item.children"
                :key="item1.name">
                  <el-menu-item index="1-1" 
                  ><i :class="item1.meta.icon"></i>
                  <span>{{ item1.meta.title }}</span></el-menu-item
                >
               </router-link>
                
            
          </el-menu-item-group>
        </el-submenu>
        </template>
      </el-menu>
    </el-col>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      menu:[],
    };
  },

  components: {},

  computed: {},

  created() {
    //vueX中获取数据
    // console.log(this.$store.state.routes[3].children);
    this.menu=this.$store.state.routes[3].children
    // console.log(11,this.menu);
  },

  mounted() {},

  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
  },
};
</script>
<style scoped lang='less'>
.menu{
  height: 100%;
  .el-col{
    height: 100%;
    .el-menu{
      height: 100%;
     
    }
//   .el-menu-vertical-demo:not(.el-menu--collapse) {
//   width: 200px;
//   min-height: 400px;
// }
  }

}

</style>